<template>
  <div class="top">
    <MyHeader>
      <span class="iconfont icon-ziyuan"></span>
    </MyHeader>

    <MyLogo />

    <MyNav />
  </div>

  <div class="body">
    <!-- <MyContent /> -->
    <!-- vue2的写法 -->
    <!-- <keep-alive>
      <router-view></router-view>
    </keep-alive> -->

    <!-- vue3的写法 -->
    <RouterView v-slot="{ Component }">
      <KeepAlive>
        <component :is="Component" />
      </KeepAlive>
    </RouterView>

    <!-- <RouterView v-slot="{ Component }">
      <Transition name="fade">
        <component :is="Component" />
      </Transition>
    </RouterView> -->
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import MyLogo from "./components/MyLogo.vue";
import MyNav from "./components/MyNav.vue";
// import MyContent from "./components/MyContent.vue";

export default {
  components: {
    MyHeader,
    MyLogo,
    MyNav,
    // MyContent,
  },
};
</script>

<style lang="less" scoped>
.top {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}
.iconfont {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: @xl-font;
}

.body {
  position: fixed;
  top: 156px;
  bottom: 50px;
  left: 0;
  right: 0;
}

/* 下面我们会解释这些 class 是做什么的 */
// .fade-enter-active,
// .fade-leave-active {
//   transition: all 0.5s ease;
// }

// .fade-enter-from {
//   opacity: 0;
//   transform: translate(20px);
// }
// .fade-leave-to {
//   opacity: 0;
//   transform: translate(-20px);
// }
</style>
